<template>
  <div class="parent">
    <el-menu
      default-active="1"
      active-text-color="#00a596">
      <el-menu-item index="1" @click="menuTo('1')">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">工作台</span>
        </template>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-share"></i>设备分布地区</template>
        <el-menu-item index="2-1" @click="menuTo('2-1')">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">设备分布散点地图</span>
          </template>
        </el-menu-item>
        <el-menu-item index="2-2" @click="menuTo('2-2')">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span slot="title">设备分布聚合地图</span>
          </template>
        </el-menu-item>
        <el-menu-item index="2-3" @click="menuTo('2-3')">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">行政区划设备分布图</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-message"></i>设备管理</template>
        <el-menu-item index="3-1" @click="menuTo('3-1')">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">协议管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="3-2" @click="menuTo('3-2')">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span slot="title">合同管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="3-3" @click="menuTo('3-3')">
          <template slot="title">
            <i class="el-icon-printer"></i>
            <span slot="title">销售录入</span>
          </template>
        </el-menu-item>
        <el-menu-item index="3-4" @click="menuTo('3-4')">
          <template slot="title">
            <i class="el-icon-sold-out"></i>
            <span slot="title">质检绑码</span>
          </template>
        </el-menu-item>
        <el-menu-item index="3-5" @click="menuTo('3-5')">
          <template slot="title">
            <i class="el-icon-news"></i>
            <span slot="title">现场调试</span>
          </template>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title"><i class="el-icon-time"></i>能效监测评估</template>
        <el-menu-item index="4-1"  @click="menuTo('4-1')">
          <template slot="title">
            <i class="el-icon-service"></i>
            <span slot="title">设备实时工况数据</span>
          </template>
        </el-menu-item>
        <el-menu-item index="4-2" @click="menuTo('4-2')">
          <template slot="title">
            <i class="el-icon-tickets"></i>
            <span slot="title">远程抄表</span>
          </template>
        </el-menu-item>
        <el-menu-item index="4-3" @click="menuTo('4-3')">
          <template slot="title">
            <i class="el-icon-date"></i>
            <span slot="title">设备历史工况数据</span>
          </template>
        </el-menu-item>
        <el-menu-item index="4-4" @click="menuTo('4-4')">
          <template slot="title">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">能效数据汇总</span>
          </template>
        </el-menu-item>
        <el-menu-item index="4-5" @click="menuTo('4-5')">
          <template slot="title">
            <i class="el-icon-bell"></i>
            <span slot="title">能效评价监测分析</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isCollapse: false
    }
  },
  methods: {
    menuTo (key) {
      let obj = {
        '1': '/Home/Workbench', // 工作台
        '2-1': '/Home/Scatterplot', // 设备分布散点地图
        '2-2': '/Home/Aggregategraph', // 设备分布聚合地图
        '2-3': '/Home/division', // 行政区划设备分布图
        '3-1': '/Home/protocol', // 协议管理
        '3-2': '/Home/contract', // 合同管理
        '3-3': '/Home/salesEntry', // 销售录入
        '3-4': '/Home/bindingCode', // 质检绑码
        '3-5': '/Home/commissioning', // 现场调试
        '4-1': '/Home/realTime', // 设备实时工况数据
        '4-2': '/Home/meter', // 远程抄表
        '4-3': '/Home/conditions', // 设备历史工况数据
        '4-4': '/Home/energyData', // 能效数据汇总
        '4-5': '/Home/evaluation' // 能效评价监测分析
      }
      this.$router.push(obj[key])
    }
  }
}
</script>
<style scoped lang="less">
.el-menu{
  width: 219px;
}
.el-menu-item /deep/{
  width: 220px;
  text-align: left;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  height: 100%;
}
</style>
